const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: '[name].build.js',
        path: resolve(__dirname, 'build'),
    },
    // loader 配置
    module: {
        rules: [
            // loader 的配置
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            },
            //一下配置只会匹配一个
            {
                oneOf:[]
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
    ],
    mode: 'development', // 开发模式
    // mode: 'production', // 生产模式
    // 解析模块的规则
    resolve:{
        // 配置解析模块路径别名：优点 简写路径 缺点 路径没有提示
        alias:{
            // 这样的话就相当于在 import 时就可以少些路径了，以前【import '../css/index.css'】  然后配置了这个就可以写成这样了 【import '$css/index.css'】
            $css:resolve(__dirname,'src/css'),
        },
        // 可以省略 import 时的后缀，比如以前是 【import '../css/index.css'】 配置了这个就可以写成 【import '../css/index'】 了，这样要注意文件名字不能一样，不然容易弄错（当在同一个文件夹下的js和css有同名的文件时）
        // extensions:['.js','.json','.css'],
        // 告诉 webpack node_modules 的文件夹路径在哪里
        modules:[resolve(__dirname,'../../node_modules','node_modules')]
    }

}